<template>
  <div class="list-wrapper">
    <Wrap>
      <div slot="main_wrap">
        <avue-crud ref="crud"
            :data="tableData"
            :page.sync="page"
            class="list-table"
            :permission="permissionList"
            :table-loading="tableLoading"
            :option="tableOption"
            @on-load="getList"
            @refresh-change="refreshChange"
            @search-change="searchChange"
            @size-change="sizeChange"
            @current-change="currentChange"
            @row-update="handleUpdate"
            @row-save="handleSave"
            @row-del="rowDel">
        </avue-crud>
        <!-- <div class="outline-border" style="width: 100%;" ng-show="equipment">结果：机电设备总数：
            <strong class="ng-binding">509</strong>台，故障设备台数：       <strong class="ng-binding">0</strong>
            台，已报停设备：<strong class="ng-binding">0</strong>
            台，已报废设备：<strong class="ng-binding">0</strong>
            台，设备完好率：<strong class="ng-binding">100.00%</strong>。
        </div> -->
        <!-- <div class="chart-border half-chart">
             <v-chart :options="chartParams1" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
        </div>
        <div class="chart-border half-chart">
             <v-chart :options="chartParams2" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
        </div>
        <div style="clear:both"></div> -->
      </div>
    </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {tableOption} from '@/const/crud/energy/list'
import { fetchList, addObj, getObj, delObj, putObj } from '@/api/energy/energyDevice'
const option1 = {
  color: ['#588dd5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 80,
    right: 50,
    bottom: 60,
    top: 60
  },
  legend: {
    top: 20,
    itemWidth: 20,
    itemHeight:10,
    textStyle: {
      color: '#fff'
    },
    data: ['设备整体完好率历史数据趋势图']
  },
  xAxis: {
    type: 'category',
    data: ['2021-10', '2021-11','2021-12','2022-01','2022-02','2022-03',],
    // data: [],
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisTick: {
      show:false
    },
    axisLabel: {
      show: true,
      color: '#fff'
    }
  },
  yAxis: {
    type: 'value',
    // interval: 10,
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisLabel: {
      color: '#fff',
      formatter: '{value}'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show:true,
      lineStyle: {
        color: '#0c324a'
      }
    }
  },
  series: [{
    name: '设备整体完好率历史数据趋势图',
    data: [31.64, 17.88, 14.07, 12.14, 9.7, 0],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 3// 设置线条粗细
        },
        barBorderRadius: 6
      }
    },
  }]
}
const option2 = {
  title: {
    text: '系统设备占比',
    textStyle:{ 
      color: '#fff',
      fontSize: 15
    },
  },
  color: ['#588dd5', '#639871', '#c05050', '#ffb980', '#d87a80', '#8d98b3', '#80b9f4', '#97b552', '#95706d'],
  tooltip: {
    trigger: 'item',
     formatter: function (params) {
      let res = '<p style="color: #fff;margin-bottom: 0">' + params.name + '</p><p style="color: #fff;margin-bottom: 0">' + params.value + '(' + params.percent + '%)</p>'
      return res
    }
  },
  // legend: {
  //   orient: 'vertical',
  //   left: 'right',
  //   top: 40,
  //   align: 'left',
  //   textStyle:{
  //     color: '#3258a2'
  //   }
  // },
  series: [
    {
      type: 'pie',
      radius: '60%',
      left: 0,
      top: 10,
      right: 80,
      data: [
        { value: 17690776, name: '特殊用电' },
        { value: 18351432, name: '照明插座用电' },
        { value: 24483229, name: '空调用电' },
        { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
export default {
  components: {
    Wrap
  },
  data () {
    return {
      chartParams1: {},
      chartParams2: {},
      searchForm: {},
      tableData: [],
      tableOption: tableOption,
      page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
      },
      tableLoading: false
    }
  },
  computed: {
      permissionList() {
          return {
              addBtn: true,
              delBtn: true,
              editBtn: true
          };
      }
  },
  created() {
     this.chartParams1  = option1
     this.chartParams2  = option2
  },
  methods: {
      getList(page, params) {
          this.tableLoading = true
          fetchList(Object.assign({
              current: page.currentPage,
              size: page.pageSize
          }, params, this.searchForm )).then(response => {
              this.tableData = response.data.data.records
              this.page.total = response.data.data.total
              this.tableLoading = false
          }).catch(() => {
              this.tableLoading=false
          })
      },
      rowDel: function (row, index) {
          this.$confirm('是否确认删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(function () {
              return delObj(row.id)
          }).then(data => {
              this.$message.success('删除成功')
              this.getList(this.page)
          })
      },
      handleUpdate: function (row, index, done,loading) {
          loading();
          putObj(row).then(data => {
              this.$message.success('修改成功')
              done()
              this.getList(this.page)
          }).catch(() => {
          });
      },
      handleSave: function (row, done,loading) {
          loading();
          addObj(row).then(data => {
              this.$message.success('添加成功')
              done()
              this.getList(this.page)
          }).catch(() => {
          });
      },
      sizeChange(pageSize){
          this.page.pageSize = pageSize
      },
      currentChange(current){
          this.page.currentPage = current
      },
      searchChange(form, done) {
          this.searchForm = form
          this.page.currentPage = 1
          this.getList(this.page, form)
          done()
      },
      refreshChange() {
          this.getList(this.page)
      }
  }
}
</script>

<style lang="scss">
.half-chart{
    width: 49.5%;
    float: left;
    margin-bottom: 20px;
    &:nth-child(3) {
        margin-right: 1%;
    }
}
.outline-border{
    color: #fff;
    strong{
        color: #2196F3;
    }
}
.list-wrapper{
    .chart-border{
        height: 360px;
    }
}
.list-table{
    ::-webkit-scrollbar:horizontal{
        height: 14px;
    }
    .avue-crud__tip{
        display: none;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        background-color: #153245;
        border: solid 1px rgba(0, 245, 255, 0.4);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .el-table__fixed-right::before, .el-table__fixed::before, .el-table::before{
        height: 0;
    }
    th.el-table-column--selection {
        .el-checkbox{
            display: none;
        }
    }
}
</style>
